import { useRef, useEffect, useState } from "react";
import { Button, SearchBar, Swiper, Space, Toast } from "antd-mobile";
import style from "../css/index.module.scss";
import { RightOutline } from "antd-mobile-icons";
import {
  getBookList,
  getIndexData,
  getNecessary,
  getTalent,
  Hot,
} from "../Api";
import { useNavigate } from "react-router-dom";
export default () => {
  let Navigate = useNavigate(); //得到跳转方法
  // 搜索框
  const searchRef = useRef(null);
  // 轮播图
  let [swiperList, setSwiperList] = useState([]);
  let getBooks = async () => {
    let { data } = await getBookList();
    // console.log(data.data.single_list);
    setSwiperList(data.data.single_list);
  };
  useEffect(() => {
    getBooks();
  }, []);
  const items = swiperList.map((item, index) => (
    <Swiper.Item key={index}>
      <div
        className={style.content}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`);
        }}
      >
        <img src={item.goods_thumb} alt="" />
        <div className={style.con}>
          <h3>{item.goods_name}</h3>
          <p>{item.goods_desc}</p>
          <div>
            {item.expert_info.length != 0 && (
              <div className={style.auth}>
                <img src={item.expert_info.avatar} alt="" />
                <p>{item.expert_info.name}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </Swiper.Item>
  ));
  // 分类
  let [sort, setSort] = useState([]);
  let getIndex = async () => {
    let { data } = await getIndexData();
    // console.log(data.data.category_list);
    setSort(data.data.category_list);
  };
  useEffect(() => {
    getIndex();
  }, []);
  // 达人书单
  let [bookList, setBookList] = useState([]);
  let getNecessaryData = async () => {
    let { data } = await getNecessary();
    // console.log(data.data);
    setBookList(data.data);
  };
  useEffect(() => {
    getNecessaryData();
  }, []);

  // 达人精选
  /*   let getTalentList = async () => {
    let { data } = await getTalent();
    console.log(data);
  };
  useEffect(() => {
    getTalentList();
  }, []); */
  // 热门榜单
  let getHot = async () => {
    let { data } = await Hot();
    console.log(data);
  };
  useEffect(() => {
    getHot();
  }, []);
  return (
    <div>
      <div className={style.search}>
        <SearchBar placeholder="入园" />
      </div>
      <div className="swiper">
        <Swiper autoplay loop>
          {items}
        </Swiper>
      </div>
      <div className={style.sort}>
        {sort.map(
          (val, index) =>
            val.id == 2 &&
            val.tag_list.map((item) => (
              <Space key={item.id}>
                <img src={item.image} alt="" />
                <p>{item.name}</p>
              </Space>
            ))
        )}
      </div>
      <div className={style.all}>
        <div
          onClick={() => {
            Navigate("/allSort");
          }}
        >
          全部分类 <RightOutline />
        </div>
      </div>
      {/* 达人书单 */}
      <div className={style.Necessary}>
        <div className={style.book}>
          <div className={style.left}>
            <h3>达人书单</h3>
            <span>200位阅读推广人联手推荐</span>
          </div>
          <p>
            {bookList.total}个书单
            <RightOutline />
          </p>
        </div>
        <ul className={style.bookCon}>
          {bookList.total &&
            bookList.list.map((item) => (
              <li key={item.goods_id}>
                <img src={item.goods_thumb} alt="" />
                <h3>{item.goods_name}</h3>
                <p>{item.expert_description}</p>
                <div className={style.btm}>
                  <img src={item.expert.avatar} alt="" />
                  <span>{item.expert.name}</span>
                </div>
              </li>
            ))}
        </ul>
      </div>
      {/* 热门榜单 */}
      <div className={style.hot}></div>
    </div>
  );
};
